<template>
  <!-- 我是公告管理 -->
  <div id="div-notemanage-container">
    <button v-show="false" @click="openDialog">公告管理</button>
    <el-dialog
      class="dialog"
      title="公告管理"
      :visible.sync="dialogVisible"
      width="900px"
      append-to-body
      :modal="false"
      :close-on-click-modal="false"
      @close="closeDialog"
      v-dialogDrag
    >
      <div class="dia-content">
        <div class="content-input">
          <input
            v-model="searchValue"
            @input="handleinput"
            placeholder="请输入关键字"
          />
        </div>
        <el-table
          style="width: 100%"
          :data="NoteData"
          stripe
          border
          highlight-current-row
        >
          <el-table-column
            property="id"
            label="公告id"
            width="65"
            align="center"
          ></el-table-column>
          <el-table-column
            property="content"
            label="公告内容"
            width="290"
            align="center"
          ></el-table-column>
          <el-table-column label="发布时间" width="235" align="center">
            <template slot-scope="scope">
              <i class="el-icon-time"></i>
              <span style="margin-left: 10px">{{ scope.row.date }}</span>
            </template>
          </el-table-column>
          <el-table-column
            property="postuser"
            label="发布用户"
            width="100"
            align="center"
          ></el-table-column>
          <el-table-column label="操作" width="159" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="handleEdit(scope.row)"
                >编辑</el-button
              >
              <el-popconfirm
                confirm-button-text="确定删除"
                cancel-button-text="不用了"
                icon="el-icon-info"
                icon-color="red"
                title="确定要删除这条公告吗？"
                @confirm="handledel(scope.row)"
              >
                <el-button
                  style="margin-left: 10px"
                  slot="reference"
                  size="mini"
                  type="danger"
                  >删除</el-button
                >
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[1, 2, 5, 10]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="searchValue ? resutofsearch.length : DataAll.length"
        ></el-pagination>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="closeDialog">关闭</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="修改公告内容"
      :visible.sync="EditDiaVisible"
      width="600px"
      append-to-body
      :modal="false"
      :close-on-click-modal="false"
      @close="closeEditDia"
      v-dialogDrag
    >
      <el-form
        ref="editForm"
        status-icon
        :model="Form"
        :rules="rules"
        label-width="120px"
        label-style="text-align:center"
      >
        <el-form-item label="公告id:  " prop="id">
          <p>{{ Form.id }}</p>
        </el-form-item>
        <el-form-item prop="content">
          <label slot="label">编辑公告</label>
          <el-input
            type="textarea"
            v-model="Form.content"
            :placeholder="Form.oldcontent"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="okEdit">
            确认修改
          </el-button>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="closeEditDia">关闭窗口</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'NoteManage',
  data() {
    return {
      dialogVisible: false,
      NoteData: [],
      DataAll: [],
      searchValue: '',
      page: 1,
      size: 5, // 每页显示数
      resutofsearch: [],
      EditDiaVisible: false,
      Form: {
        id: null,
        oldcontent: '',
        content: '',
      },
      rules: {
        content: [
          { required: true, message: '请输入新的公告内容', trigger: 'blur' },
        ],
      },
    }
  },
  methods: {
    openDialog() {
      this.dialogVisible = true
      this.initData()
    },
    closeDialog() {
      this.dialogVisible = false
    },
    openEditDia() {
      this.EditDiaVisible = true
    },
    closeEditDia() {
      this.EditDiaVisible = false
    },
    initData() {
      this.$http.get('/notice').then(res => {
        if (res.code == 0) {
          res.result.data2.map(item => {
            let data = {}
            data.id = item.notice_id
            data.content = item.notice_content
            data.postuser = item.user_name
            data.date = item.notice_time
            this.NoteData.push(data)
          })
          this.DataAll = this.NoteData
          this.getCategory()
        }
      })
    },
    /* 搜索框变化时触发的事件 */
    handleinput() {
      this.NoteData = this.DataAll
      let str = ['', ...this.searchValue, ''].join('.*')
      let reg = new RegExp(str)
      this.NoteData = this.NoteData.filter(
        item =>
          reg.test(item.id) || reg.test(item.content) || reg.test(item.postuser)
      )
      this.resutofsearch = this.NoteData
      this.getCategory()
    },
    /* 分页相关方法 */
    handleCurrentChange(p) {
      this.page = p
      // 重新获取新的分页数据
      this.getCategory()
    },
    handleSizeChange(s) {
      this.size = s
      this.getCategory()
    },
    getCategory() {
      const start = (this.page - 1) * this.size //起始下标（包含）
      const end = (this.page - 1) * this.size + this.size //结束下标（不包含）
      if (!this.searchValue) {
        this.NoteData = this.DataAll.slice(start, end)
      } else {
        this.NoteData = this.resutofsearch.slice(start, end)
      }
    },
    /* 编辑相关的方法 */
    handleEdit(row) {
      this.openEditDia()
      this.Form.id = row.id
      this.Form.oldcontent = row.content
    },
    okEdit() {
      // 校验表单
      this.$refs['editForm'].validate(valid => {
        if (valid) {
          this.$http
            .put(`/notice/${this.Form.id}`, { content: this.Form.content })
            .then(res => {
              if (res.code == 0) {
                this.closeEditDia()
                /* 修改完成更新表单 */
                this.NoteData = []
                this.initData()
                this.$message.success('修改完成！')
              }
            })
        }
      })
    },
    /* 删除相关 */
    handledel(row) {
      this.$http.delete(`/notice/${row.id}`).then(res => {
        if (res.code == 0) {
          /* 删除成功更新表单 */
          this.NoteData = []
          this.initData()
          this.$message.success('删除成功')
        }
      })
    },
  },
}
</script>

<style scoped>
#div-notemanage-container {
  position: absolute;
  top: 50px;
  left: 485px;
}
.dia-content {
  width: 850px;
}
</style>
